<template>
	<div class="container">
		<h3 class="header-title clearfix">
			<span></span>
			<p>{{$store.getters.getPageTitle}}</p>
			<p class="fr el-icon-plus" @click="openInputDialog"> 新增项目</p>
		</h3>
		<!-- 项目筛选 -->
		<div class="project-screen clearfix">
			<el-input v-model="serchKey" class="screen-input fl" placeholder="请输入公司名称"></el-input>
			<el-button size="small" type="primary" class="screen-btn fl" @click="getDataList(search.value)">选择
			</el-button>
		</div>
		<!-- 主体列表栏 -->
		<comTable :options="tableData" @stopProject="stopProject" class="projectTab" @statuss="statuss" @editData="editData" @markDia="markDia"></comTable>
		<perMgAddRemarks ref="remark" :options="remarksData"></perMgAddRemarks>
		<!-- input弹窗 -->
		<comInput :options="inputData" @subData="subData"></comInput>


		<!-- 分页器 -->
		<div class="pageBox">
			<el-pagination @size-change="handleSizeChange" @current-change="pageChange" :current-page="cur"
				:page-sizes="[10, 20, 30, 50, 100]" :page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="totalNum" background></el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		components: {
			perMgAddRemarks: () => import("../pageComponents/perMgAddRemarks.vue"),
			comTable: () => import("../commonComponents/comTable.vue"),
			comInput: () => import("../commonComponents/comInput.vue"),

		},
		data() {
			return {
				serchKey: '',
				/* 筛选数据 */
				search: {
					entryName: '',
					options: [],
					value: ''
				},
				/* 主体数据列表 */
				remarksData: {
					showDialog: false, //显示弹窗
					title: '查看备注', //标题
				},
				tableData: {
					list: [{
							title: '公司名称',
							prop: 'companyName',
							isClick: false
						},
						{
							title: '岗位名称',
							prop: 'positionName',
							isClick: false
						},
						{
							title: '招聘渠道',
							prop: 'recruitmentChannel',
							isClick: false
						},
						{
							title: '发布时间',
							prop: 'createTime',
							isClick: false
						},
						{
							title: '备注',
							prop: 'projectRemarks',
							isClick: true,
							eventName:'markDia'
							
						},
						{
							title: '状态',
							prop: 'suspendStatus',
							isClick: true,
							eventName: 'statuss'
						},
						{
							title: '操作',
							prop: 'edit',
							isClick: true,
							eventName: 'editData'
						}
					],
					noOperation: false, //是否有操作项
					operation: [ //操作项内容
						// {name:'查看明细',isBtn:false,title:'detailsView'},
					],
					data: [
						/* {
							projectName: '物险',						//项目名称
							createTime: '2020-1-55',					//新增时间
							entryNumber: 20,							//入职量
							turnover: '20%',							//离职率
							suspendTime: '2020-5-12',					//中止时间
							projectRemark: 'xxx',						//备注
							suspendStatus: '已中止',						//操作
						}, */
					]
				},
				/* 弹窗数据 */
				inputData: {
					recruitmentChannel:[],
					showDialog: false, //显示弹窗
					title: '新增项目', //标题
					dialogContent: [{
							title: '公司名称:',
							value: 'companyName'
						},
						{
							title: '岗位名称:',
							value: 'positionName'
						},
						{
							title: '招聘渠道:',
							value: 'recruitmentChannel'
						},
					],
					form: {
						projectRemark: '',
					}
				},

				/* 分页功能数据 */
				cur: 1,
				pageSize: 10,
				totalNum: 0, //总共有多少条数据,根据这个数据去适配页数
			}
		},
		created() {
			this.init();
		},
		methods: {
			markDia(data){
				console.log(data);
				this.remarksData.textarea = data.projectRemarkDia;
				if(data.projectRemarkDia){
					this.remarksData.showDialog = true;
				}
				
			},
			
			statuss() {},
			editData(row, index) {
				console.log(row);
				this.inputData.showDialog = true;
				this.inputData.type = '编辑项目';
				this.inputData.title = '编辑项目';
				this.inputData.data = row
				let recruitmentChannel =  row.recruitmentChannel.split('\n',-1) 
				recruitmentChannel.pop()
				this.inputData.recruitmentChannel=recruitmentChannel
				console.log(recruitmentChannel);
			},
			//初始化
			init() {
				localStorage.setItem('pageTitle', '项目管理');
				this.$store.dispatch('setPageTitle', localStorage.getItem('pageTitle'));
				// this.getDataList();	
				this.getOptionsList();
			},
			//获取搜索列表数据
			getOptionsList() {
				let data = {
					pageNum: this.cur, //页码
					pageSize: this.pageSize, //每页条疏忽
					serchKey: this.serchKey //查询关键字
				}
				this.$telAxios.post('/v1/librarian/selectProjectByList', data).then(res => {
					console.log(res);
					this.totalNum = Math.abs(res.data.data.totalNum)
					if (res.data.code === 1000) {
						res.data.data.plist.forEach(item => {
							item.projectRemarks = item.projectRemark
							if(item.projectRemarks.length>10){
								item.projectRemarks=item.projectRemarks.substring(0,10)+'....'
								item.projectRemarkDia=item.projectRemark
							}
							if(item.rlist.length>0){
								 item.rlist.forEach(data=>{
									 item.recruitmentChannel+=data+'\n'
								 })	
								item.recruitmentChannel= item.recruitmentChannel.substring(9)
							}
							item.edit = '编辑'
							if (item.suspendStatus == '1') {
								item.suspendStatus = '紧急'
							} else if (item.suspendStatus == '2') {
								item.suspendStatus = '正常'
							} else {
								item.suspendStatus = '暂停'
							}
							this.tableData.data = res.data.data.plist;
						})
					} else {
						this.$message({
							message: res.data.message,
							type: 'warning'
						})
					}
				})
			},
			//获取项目列表
			getDataList(data) {
				let params = {
					pageSize: this.pageSize,
					pageNum: this.cur,
					serchKey: this.serchKey
				};
				if (data) {
					params.projectName = data
				};
				this.$telAxios.post('/v1/librarian/selectProjectByList', params).then(res => {
					console.log(res);
					this.totalNum = Math.abs(res.data.data.totalNum)
					if (res.data.code === 1000) {
						res.data.data.plist.forEach(item => {
							item.projectRemarks = item.projectRemark
							if(item.projectRemarks.length>10){
								item.projectRemarks=item.projectRemarks.substring(0,10)+'....'
								item.projectRemarkDia=item.projectRemark
							}
							if(item.rlist.length>0){
								 item.rlist.forEach(data=>{
									 item.recruitmentChannel+=data+'\n'
								 })	
								item.recruitmentChannel= item.recruitmentChannel.substring(9)
							}
							item.edit = '编辑'
							if (item.suspendStatus == '1') {
								item.suspendStatus = '紧急'
							} else if (item.suspendStatus == '2') {
								item.suspendStatus = '正常'
							} else {
								item.suspendStatus = '暂停'
							}
						})
						this.tableData.data = res.data.data.plist;
						this.totalNum = Number(res.data.data.totalNum);
					} else {
						this.$message({
							message: res.data.message,
							type: 'warning'
						})
					}
				})
			},
			//打开新增项目弹窗
			openInputDialog() {
				this.inputData.showDialog = true;
				this.inputData.type = '新增项目';
				this.inputData.title = '新增项目';
				
			},

			//提交新增项目数据
			subData(data) {
				console.log(data);
				this.inputData.showDialog = false;
				this.getDataList();
				this.getOptionsList();
			},
			//中止项目弹窗
			stopProject(data) {
				console.log(data);
				if (data.suspendStatus == '2') {
					this.$confirm('是否确认中止该项目？', '项目中止', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					}).then(() => {
						this.$telAxios.post('/v1/librarian/updateProjectSuspendStatus', {
							projectId: data.projectId,
							projectName: data.projectName
						}).then(res => {
							console.log(res);
							if (res.data.code === 1000) {
								this.$message({
									message: '项目中止成功！',
									type: 'warning'
								})
								this.getDataList();
							} else {
								this.$message({
									message: res.data.message,
									type: 'warning'
								})
							}
						})
					}, () => {
						this.$message({
							message: '项目中止已取消！',
							type: 'info'
						})
					})
				} else {
					this.$message({
						message: '该项目已经中止，无法进行操作！',
						type: 'warning'
					})
				}
			},

			//当前页是第几页,点击的第几页的时候调用这个函数
			pageChange(p) {
				// 点击的时候传过来一个参数，这个参数就是所点击的当前页数，
				// 然后把这个当前页数转换成字符串形式赋值给page，
				// 然后把page这个参数传给search这个方法
				this.cur = p;
				this.getDataList();
			},
			//每页有多少条,10,20,50等,点击选择的时候调用这个方法
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDataList();
			},
		}
	}
</script>

<style scoped="scoped">
	.container {
		background-color: #fff;
		height: 100%;
		padding-left: 20px;
	}

	.header-title {
		padding: 10px 0 20px 0;
		border-bottom: 1px solid #D2D2D2;
	}

	.header-title span {
		width: 15px;
		float: left;
		height: 30px;
		background-color: #0064E4;
		margin-right: 20px;
	}

	.header-title p {
		font-size: 16px;
		line-height: 30px;
		float: left;
		font-family: PingFang SC;
	}

	.header-title .fr {
		float: right;
		margin-right: 30px;
		cursor: pointer;
		color: #5492CC;
	}
	.projectTab /deep/ .caret-wrapper    {
		display: none;
	}

	.project-screen {
		width: 600px;
		margin: 30px auto 50px;
	}

	.screen-input {
		width: 470px;
	}

	.screen-btn {
		margin-left: 30px;
		width: 100px;
		height: 40px;
		background-color: rgb(86, 145, 202);
	}

	.pageBox {
		margin-top: 20px;
	}

	/deep/.el-table th {
		height: 46px;
		font-size: 14px;
		color: #727272;
		background-color: rgb(86, 145, 202);
		border: rgb(86, 145, 202);
		color: white;
	}
</style>
